@charset "utf-8";
@import "reset";
@function r($p){
    @return $p/40*1rem;
}
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
html,body{
    width: 100%;
    
}
html{
    font-size: 40px;
    height: 100%;
}
body{
    font-size: 16px;
    height: 100%;
    position: relative;
}
.WebHead{
    position: absolute;
    top: 0;
    z-index: 50;
    width: r(640);
    display:flex;
//  border-bottom:1px solid #a7a7a7;
    height:r(77);
    justify-content: center;
    align-items: center;
    >div{
        display: flex;
        align-items: center;
        position: relative;
        width: r(42);
        height: r(77);
        img{
            height:r(42);
        }
    }
    >div:nth-of-type(3){
        justify-content: space-around;
        width:r(113);
        margin: 0 r(76);
    }
    >div:nth-of-type(2),>div:nth-of-type(3),>div:nth-of-type(4){
        justify-content: space-around;
        width:r(113);
    }
    >div:nth-of-type(2)::after{
        position: absolute;
        bottom: 0;
        content:"";
        width:r(113);
        height:r(3);
        background: black;
    }
    >div:nth-of-type(2){
        margin-left: r(99);
    }
    >div:nth-of-type(4){
        margin-right: r(99);
    }
    >div:nth-of-type(1){
        margin-left: r(31);
    }
    >div:nth-of-type(5){
        margin-right: r(31);
    }
}
.Web-center{
    width: r(640);
    position: absolute;
    top: r(77);
    bottom: r(0);
    z-index: 10;
    overflow: auto;
}
.WebPage{
    width: r(640);
}

.WebLunbo{
    width: r(640);
    height:r(300);
    >img{
        width: r(640);
        height:r(300);
    }
}
.Webfenlei{
    width: r(640);
    height: r(146);
    background: #f2f2f2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    >div{
        width: r(90);
        >img{
            width: r(90);
        }
    }
}
.WebContent{
    width: r(640);
}
.WebContent-Title{
    box-sizing: border-box;
    width: r(612);
    display: flex;
    height: r(56);
    align-items: center;
    padding-left: r(28);
    >div{
        >img{
            width: r(29);
            vertical-align: middle;
        }
    }
    >p{
        margin: 0 r(11);
    }
}
.WebContent-Content{
    width: r(640);
    margin-bottom:r(52) ;
    >div{
        display: flex;
        box-sizing: border-box;
        width: r(640);
        padding: 0 r(28);
        >div:nth-of-type(1){
            >img{
                width: r(150);
            }
        }
        >div:nth-of-type(2){
            box-sizing: border-box;
            margin-left: r(14);
            width: r(420);
            height: r(119);
            position: relative;
            border-bottom:1px solid #a7a7a7 ;
            >h3{
                font-size: 16px;
                font-weight: 100;
                position: absolute;
                top: r(14);
            }
            >h4{
                position: absolute;
                top: r(50);
                font-size: 12px;
                font-weight: 100;
                color: #adadad;
            }
            >h5{
                font-size: 12px;
                font-weight: 100;
                color: #adadad;
                position: absolute;
                top: r(90);
                >i{
                    margin-right: r(62);
                    font-size: 10px;
                }
            }
            >i{
                position: absolute;
                right: 0;
                top:r(46);
                font-size: 16px;
            }
        }
    }
}
.WebBottom{
    background: rgba(0,0,0,0);
    position: absolute;
    bottom:0;
    z-index: 100;
    width: r(640);
    height: r(70);
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    >div{
        >img{
            width: r(60);
        }
    }

}
.Bottom{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/bj-1.jpg);
    background-repeat:round ;
    z-index: 200;
    >div{
        width: 100vw;
        height: 30vw;
        display: flex;
        justify-content: center;
        >div{
            text-align: center;
            >p{
                color: white;
                height: 8vw;
                line-height: 8vw;
                font-size: 4vw;
            }
            >div{
                margin: 0 5vw;
                width: 20vw;
                height: 20vw;
                border:2px solid white;
                border-radius: 10vw;
                display: flex;
                justify-content: center;
                align-items: center;
                >i{
                    color: white;
                    font-size: 8vw;
                }
            }
        }
    }
    >div:nth-of-type(1){
        margin-top: 84vw;
    }
    >div:nth-of-type(3){
        height: 5vw;
        margin-top: 16vw;
        >i{
            color: white;
            font-size: 5vw;
        }
    }
}
